<template>
  <div class="organization">
    <!-- 上面的部分 -->
    <div class="top">
      <div>
        <!-- 伪类部分 -->
        <div>
          <span class="top-organization">机构管理</span>
        </div>
        <div class="keyword-and-button-container">
          <div class="organization-keywords">
            <el-input class="keywords-input" placeholder="请输入关键字" v-model="getTablePamras.searchKey">
              <template #suffix>
                <el-icon class="el-input__icon" @click="findData">
                  <search />
                </el-icon>
              </template>
            </el-input>
          </div>
          <div>
            <el-button @click="addOrigan">新增机构</el-button>
            <el-button @click="daochu">导出</el-button>

          </div>
        </div>
      </div>
    </div>
    <!-- 中间的部分 -->
    <div class="organization-middle">
      <!-- table表格部分 -->
      <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column type="selection" width="55" />
        <el-table-column property="number" label="编号" width="170">
        </el-table-column>
        <el-table-column label="机构图片">
          <template #default="{ row }">
            <img :src="'http://127.0.0.1:3000/' + row.picture" style="width: 40px" />
          </template>
        </el-table-column>
        <el-table-column property="name" label="机构名称"> </el-table-column>
        <el-table-column width="100" label="负责人姓名" property="contactName"></el-table-column>
        <el-table-column label="电话" property="contactTel"></el-table-column>
        <el-table-column label="机构地址" property="address"></el-table-column>
        <el-table-column label="状态" property="flag">
          <template #default="{ row }">
            <el-switch v-model="row.flag" inline-prompt active-text="启用" inactive-text="禁用"
              @click="() => changeStatus(row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <span class="origation-edit" @click="editOgan($event, scope.row)">编辑</span>
            <span class="origation-del" @click="() => delOgan(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <!-- 底部的部分 -->
  <div class="footer">
    <div class="fenyeqi">
      <Fenye :total="total" @changepageSize="getPageSize" @changeCurrentPage="getCurrentPage"></Fenye>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 分页

import api from '@/api'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// 导入分页器
import Fenye from '@/components/zxy/Fenye.vue'

import { ElMessage } from 'element-plus'

import { addOrganization } from '@/types/zxy/organizationType'

// 导入store
import organizationStore from '@/store/zxy/organization'

import { getExcel } from '@/utils/yzy/Excel'

const store = organizationStore()

// 方法
const { changeInfo } = store

// 导出数据

const tableData = ref([])

// 分页器所需的参数
const total = ref<number>(0)

// 分页器传回来的参数
// 获取页码的大小
const getPageSize = (val: number) => {
  // console.log('number', val)
  getTablePamras.value.count = val
  getTableData()
}

// 获取当前页
const getCurrentPage = (val: number) => {
  // console.log('currentPage---->', val)
  getTablePamras.value.page = val
  getTableData()
}

// 获取所有的表格
// 获取所有表格的参数
const getTablePamras = ref({
  searchKey: '',
  page: 1,
  count: 10,
})

const getTableData = async () => {
  const res = await api.organization.getOrganizationApi(getTablePamras.value)
  // console.log('后台返回结果', res)
  tableData.value = res.data.data.result.reverse()
  total.value = res.data.data.total
}

// 更改状态
const statusObj = ref({
  id: '',
  flag: '',
})
const changeStatus = (row: any) => {
  console.log(row.flag, '----------')

  // 在状态切换时才执行函数逻辑
  if (row.flag === true) {
    statusObj.value.flag = ''
    statusObj.value.id = row.id
    toChangeStatus(statusObj.value)
  } else {
    statusObj.value.flag = '0'
    statusObj.value.id = row.id
    toChangeStatus(statusObj.value)
  }
}

const toChangeStatus = async (statusObj: any) => {
  const res = await api.organization.changeOganizationStatusApi(statusObj)
  // console.log('更改状态', res.data.code)
  if (res.data.code === 200) {
    ElMessage({
      message: res.data.msg,
      grouping: true,
      type: 'success',
    })
    getTableData()
  } else {
    ElMessage({
      message: res.data.msg,
      grouping: true,
      type: 'error',
    })
  }
}

// 新增机构
const router = useRouter()
const addOrigan = () => {
  router.push('addOrginazation')
}

// 删除机构
const delOgan = async (s: any) => {
  console.log({ id: s.id })
  const res = await api.organization.delOrganizationApi({ id: s.id })
  if (res.data.msg === '删除成功!') {
    ElMessage({
      message: res.data.msg,
      grouping: true,
      type: 'success',
    })
  } else {
    ElMessage({
      message: res.data.msg,
      grouping: true,
      type: 'error',
    })
  }
  getTableData()
}

// 挂载时候将所有数据查询出来
onMounted(() => {
  getTableData()
})

// 编辑机构
const editOgan = (e: MouseEvent, s: addOrganization) => {
  // console.log('s', s.id)
  console.log('e', e)
  router.push(`editoragnization?id=${s.id}`)
  // 将这一行的数据存入状态机中
  changeInfo(s)
}

//导出
const daochu = () => {
  getExcel(tableData.value)
}

// 查找
const findData = () => {
  // 查找所有的数据
  getTableData()

}
</script>

<style scoped>
.organization {
  width: 98%;
  height: 800px;
  margin: auto;
  background-color: #fff;
}

.top-organization::before {
  margin-left: 5px;
  margin-top: 5px;
  content: '';
  display: inline-block;
  width: 10px;
  height: 30px;
  background-color: skyblue;
  margin-right: 10px;
  border-radius: 6px;
}

.top-organization {
  font-size: 20px;
  display: flex;
  align-items: center;
}

.keyword-and-button-container {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.keywords-input {
  width: 300px;
  margin-right: 10px;
}

.w-50 {
  width: 30%;
}

/* 表格部分 */
.organization-middle {
  margin-top: 15px;
}

/* 操作的按钮 */
.origation-edit {
  margin-right: 5px;
  color: darkcyan;
  cursor: pointer;
}

.origation-del {
  margin-left: 5px;
  color: red;
  cursor: pointer;
}

/* 分页器 */
.footer {
  display: flex;

  justify-content: center;
  position: relative;
}

.fenyeqi {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
}

/* 寿星 */
.el-input__icon {
  cursor: pointer;
}
</style>
